<template>
  <div class="container">
    <div class="header">
      <h1>选课中心</h1>
    </div>
    <div class="content" style="text-align: left">
      <h1 class="selection-title">{{ selectionName }}</h1>
      <br>
      <div class="course-selection" v-if="isInSelection">
        <div class="left">
          <a-tabs default-active-key="1" @change="tabChange">
            <a-tab-pane key="1" tab="专业必修">
              <a-table :bordered="true" :customRow="clickRow" :scroll="{x:710, y: 600}" :columns="courseColumns"
                       :pagination="false"
                       :data-source="courses"></a-table>
            </a-tab-pane>
            <a-tab-pane key="2" tab="专业选修">
              <a-table :bordered="true" :customRow="clickRow" :scroll="{x:710, y: 600}" :columns="courseColumns"
                       :pagination="false"
                       :data-source="courses"></a-table>
            </a-tab-pane>
            <a-tab-pane key="3" tab="公共选修">
              <a-table :bordered="true" :customRow="clickRow" :scroll="{x:710, y: 600}" :columns="courseColumns"
                       :pagination="false"
                       :data-source="courses"></a-table>
            </a-tab-pane>
            <a-tab-pane key="4" tab="选课日志">
              <a-table :bordered="true" :scroll="{x:735, y: 600}" :columns="logColumns" :data-source="logs"
                       :pagination="false"></a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="right">
          <!--          讲台-->
          <div class="platform">
            <h2>可选讲台</h2>
            <a-table :bordered="true" :pagination="false" :scroll="{x:1805, y:220}" :columns="platformColumns"
                     :data-source="platforms">
              <a-tooltip class="add-course" slot="action" slot-scope="record">
                <template slot="title">
                  <span>添加课程</span>
                </template>
                <a-icon type="plus-circle" theme="filled" @click="addSelection(record.sessionId)"/>
              </a-tooltip>
            </a-table>
          </div>
          <!--          已选课程-->
          <div class="selected">
            <h2>已选课程</h2>
            <a-table :bordered="true" :pagination="false" :scroll="{x:790, y:220}" :columns="selectedCourseColumns"
                     :data-source="selectedCourses">
              <a-tooltip class="sub-course" slot="action" slot-scope="record">
                <template slot="title">
                  <span>取消选课</span>
                </template>
                <a-icon type="minus-circle" theme="filled" @click="deleteSelection(record.selectionId)"/>
              </a-tooltip>
            </a-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import courseSelections from "@/api/courses/courseSelections";
import {getCourses, getPlatforms, addSelection, deleteSelection} from "@/api/courses/courses";
import coursesLogs from "@/api/courses/logs";
import {columns} from "@/pages/student/js/courseSelect";


export default {
  data() {
    let self = this;
    return {
      isInSelection: false,
      selectionName: "选课尚未开始",
      courseColumns: [],
      selectedCourseColumns: [],
      logColumns: [],
      courses: [],
      platformColumns: [],
      platforms: [],            // 可选讲台列表
      selectedCourses: [],      // 已选择的课程列表
      courseType: "1",
      clickRow: function (record) {
        return {
          on: {
            click: () => {
              self.loadPlatforms(record.courseId);
            }
          }
        }
      },
      logs: []
    }
  },
  methods: {
    deleteSelection(selectionId) {
      let self = this;
      deleteSelection(selectionId).then(res => {
        if (res.result) {
          self.$message.success("取消成功");
          self.loadCourseSelected();
        } else {
          self.$message.error(res.msg);
        }
      })
    },
    addSelection(sessionId) {
      let self = this;
      addSelection(sessionId).then(res => {
        if (res.result) {
          self.$message.success("添加选课成功");
          self.loadCourseSelected();
        } else {
          self.$message.error(res.msg);
        }
      })
    },
    loadSelectionStatus() {
      let self = this;
      courseSelections().then(res => {
        self.isInSelection = res.result;
        if (res.result) {
          self.selectionName = res.name;
        } else {
          self.$message.error("选课尚未开始");
        }
      })
    },
    loadCourseSelected() {
      let self = this;
      getCourses("selected").then(res => {
        if (res.result) {
          self.selectedCourses = res.courses;
        } else {
          self.$message.error(res.msg);
        }
      })
    },
    loadCourseCanSelected() {
      let self = this;
      getCourses("canSelected", self.courseType).then(res => {
        if (res.result) {
          self.courses = res.courses;
        } else {
          self.$message.error(res.msg)
        }
      });
    },
    loadPlatforms(courseId) {
      let self = this;
      getPlatforms("canSelected", courseId)
          .then(res => {
            if (res.result) {
              self.platforms = res.platforms;
            } else {
              this.$message.error(res.msg);
            }
          })
    },
    loadCourseLog() {
      let self = this;
      coursesLogs().then(res => {
        if (res.result) {
          self.logs = res.logs;
        } else {
          self.$message.error(res.msg);
        }
      })
    },
    tabChange(tab) {
      let self = this;
      if (tab - 0 === 4) {
        self.loadCourseLog()
      } else {
        // 查看可选课程
        self.courseType = tab;
        self.loadCourseCanSelected();
      }
    },
  },
  mounted() {
    let self = this;
    self.loadSelectionStatus();
    // 分别加载可选和已选课程
    self.loadCourseCanSelected();
    self.loadCourseSelected();
    self.courseColumns = columns.courseColumns;
    self.logColumns = columns.logColumns;
    self.platformColumns = columns.platformColumns;
    self.selectedCourseColumns = columns.selectedCourseColumns;
  }
}

</script>

<style scoped src="./css/courseSelect.css"></style>
<style scoped src="./css/common.css"></style>